body {
    margin: 0;
    display: flex;
    height: 100vh; /* 设置页面高度 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    overflow-x: hidden;
    font-family: 'SongTi', serif; /* 将全局字体设置为宋体 */
}

.sidebar { /*导航*/
    width: 20%; /* 左侧导航宽度为页面的五分之一 */
    background: linear-gradient(135deg, #cfe1f5, #eaf1fb);; /* 浅蓝白渐变 */
    color: white;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.content { /*主体内容*/
    width: 80%; /* 主内容区宽度为页面的五分之四 */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    background: linear-gradient(to right, #99CCff, #ffffff);
    position: relative;

}

.hidden {
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    display: none; /* 隐藏导航 */
}

.button1 { /*导航中的按钮样式*/
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start;
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    border: none; /* 不显示边框 */
    background-color: transparent; /* 背景颜色透明 */
    color: rgb(128, 128, 128); /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    border-radius: 5px; /* 圆角半径 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    width: 19.5vw;

}

a {
    text-decoration: none; /* 去掉下划线 */

}

.button1-icon {
    width: 30px; /* 图标宽度 */
    margin-right: 10px; /* 图标与文本之间的间距 */
}


.button1:hover {
    background-color: #d3d3d3; /* 悬停时背景色为浅灰色 */
    color: #336699; /* 悬停时文本颜色变为蓝色 */
    font-weight: bold;

}

.button2 { /*导航右侧上标签样式*/
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    position: absolute; /* 按钮 2 绝对定位 */
    top: 75%; /* 根据需要调整位置 */
    left: 0;
    transform: translateY(-50%); /* 垂直中心对齐 */
    border: #336699 solid 2px;
    background-color: transparent; /* 背景颜色透明 */
    color: #336699; /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    border-radius: 0px 10px 10px 0; /* 圆角 */
    transition: background-color 0.3s, color 0.3s;
    z-index: 10;
}

.button2:hover{
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    background-color: #336699;
    color: white;
}
.button3 { /*导航右侧上标签样式*/
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    position: absolute; /* 按钮 2 绝对定位 */
    top: 90%; /* 根据需要调整位置 */
    left: 0;
    color: white;
    transform: translateY(-50%); /* 垂直中心对齐 */
    border: #336699 solid 2px;
    background-color: #336699;
    font-size: 16px; /* 字体大小 */
    border-radius: 0px 10px 10px 0; /* 圆角 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    z-index: 10;
}

.button-ptm { /*导航右侧上标签样式*/
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    position: absolute; /* 按钮 2 绝对定位 */
    top: 90%; /* 根据需要调整位置 */
    left: 0;
    transform: translateY(-50%); /* 垂直中心对齐 */
    border: #336699 solid 2px;
    background-color: transparent; /* 背景颜色透明 */
    color: #336699; /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    border-radius: 0px 10px 10px 0; /* 圆角 */
    transition: background-color 0.3s, color 0.3s;
}

.button-ptm:hover{
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    background-color: #336699;
    color: white;
}
.button-p { /*导航右侧上标签样式*/
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    position: absolute; /* 按钮 2 绝对定位 */
    top: 75%; /* 根据需要调整位置 */
    left: 0;
    color: white;
    transform: translateY(-50%); /* 垂直中心对齐 */
    border: #336699 solid 2px;
    background-color: #336699;
    font-size: 16px; /* 字体大小 */
    border-radius: 0px 10px 10px 0; /* 圆角 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
}

.button4 { /*隐藏导航按钮样式*/
    width: 30px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    background-color: #d3d3d3; /* 按钮背景色 */
    border: none; /* 去掉边框 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer; /* 鼠标悬停时变成手型 */
    transition: background-color 0.3s, color 0.3s;
}

.button4:hover {
    background-color: rgb(128, 128, 128);
}

.button4-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
}


.left-button5 { /*主题内容下方标签*/
    border: none; /* 去掉边框 */
    position: absolute;
    left: 30%; /* 距离左侧 30% */
    bottom: 40px;
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    padding: 10px; /* 按钮内边距 */
    color: white;
    transform: translateY(-50%); /* 垂直中心对齐 */
    background-color: #336699;
    border-radius: 10px;
    font-weight: bold;
    width: 9vw;
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
}

.right-button5 {
    border: none;
    position: absolute;
    right: 30%; /* 距离右侧 30% */
    bottom: 40px;
    font-size: 16px; /* 字体大小 */
    padding: 10px; /* 按钮内边距 */
    color: white;
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    transform: translateY(-50%); /* 垂直中心对齐 */
    background-color: #336699;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    font-weight: bold;
    width: 9vw;
}

.button6 {
    /*predictingResult页面的文件下载按钮*/
    border: none;
    position: absolute;
    right: 45%; /* 距离右侧 30% */
    bottom: 150px;
    font-size: 16px; /* 字体大小 */
    padding: 10px; /* 按钮内边距 */
    color: white;
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    transform: translateY(-50%); /* 垂直中心对齐 */
    background-color: #336699;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    font-weight: bold;
    width: 9vw;
}
.button-Map-To-Result {
    border: none;
    position: absolute;
    right: 45%; /* 距离右侧 30% */
    bottom: 90px;
    font-size: 16px; /* 字体大小 */
    padding: 10px; /* 按钮内边距 */
    color: white;
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    transform: translateY(-50%); /* 垂直中心对齐 */
    background-color: #336699;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    font-weight: bold;
    width: 9vw;
}

.left-button5:hover, .right-button5:hover, .page-button:hover:hover, .button6:hover {
    border: #336699 solid 0.1px;
    background-color: transparent; /* 背景颜色透明 */
    color: #336699;
}

.page-button {
    position: relative;
    border: none;
    font-size: 10px; /* 字体大小 */
    padding: 1px; /* 按钮内边距 */
    color: black;
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    transform: translateY(-50%); /* 垂直中心对齐 */
    background-color: #999990;
    border-radius: 3px;
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    top: 5px;

}

.page-button-container {
    position: relative;
    text-align: center;
    gap: 20px; /* 按钮之间的间隔 */
}

.logo { /*导航左上角的深蓝色方块*/
    left: 0;
    width: 60px; /* 方块的宽度 */
    height: 60px; /* 方块的高度 */
    border-radius: 10px; /* 圆角 */
    margin-right: 10px; /* 方块和标题之间的间距 */
}

.title {
    position: absolute;
    font-size: 20px;
    color: #336699; /* 标题字体大小 */
    font-weight: bold;
    display: inline;
    top: 5px;
    left: 70px;
}
.underline { /*导航中下划线样式*/
    width: 100%; /* 下划线全宽 */
    height: 2px; /* 下划线高度 */
    background-color: rgb(128, 128, 128); /* 灰色下划线 */
}

.truck-icon { /*定义卡车图标*/
    max-width: 100%; /* 保持图片响应式 */
    height: 70px;
}

.truck-container {
    position: relative;
    top: 0;
    text-align: center;
}

.text-container {
    position: relative;
    text-align: center; /* 文字水平居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
}

.content-text {
    color: #336699; /* 设置文字颜色为蓝色 */
    font-size: 15px; /* 可选：设置字体大小 */
}

.Table-text-container {
    position: relative;
    left: 0;
    transform: translateY(-50%); /* 精确垂直居中 */
}

.Table-text {
    color: #336699; /* 设置文字颜色为蓝色 */
    font-size: 20px; /* 可选：设置字体大小 */
    font-weight: bold;
}

.table-container {
    /*trainingResult中的表格容器*/
    width: 70%;
    margin: 0 auto; /* 使表格居中 */
    overflow-y: auto; /* 只纵向滚动 */
    overflow-x: hidden;
    border: none; /* 去掉单元格的边框 */
    height: 60%;
    padding: 0; /* 去掉容器内边距 */

}

.table-container2 {
    /*predicting中的表格容器*/
    width: 85%;
    margin: 0 auto; /* 使表格居中 */
    overflow-y: auto; /* 只纵向滚动 */
    overflow-x: hidden;
    border: none; /* 去掉单元格的边框 */
    height: 60%;
    padding: 0; /* 去掉容器内边距 */

}

table { /*定义表格*/
    margin: 0; /* 去掉表格外边距 */
    width: 100%;
    border-collapse: collapse;
    border: 2px solid white; /* 添加白色边框 */

}

th {
    background-color: #99CCFF;
    color: white;
    padding: 10px;
    position: relative; /* 相对定位以便添加伪元素 */
    width: 150px; /* 固定宽度 */

}

td {

    padding: 10px;
    border: none; /* 去掉单元格的边框 */
    position: relative; /* 相对定位以便添加伪元素 */
    width: 60px; /* 固定宽度 */
    height: 25px;
}

/* 添加双竖线分隔线 */
th:not(:last-child)::after,
td:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2px; /* 单条分隔线的宽度 */
    background-color: white; /* 分隔线的颜色 */
}

th:not(:last-child)::after {
    margin-right: 7px; /* 第一条线和单元格之间的间隔 */
}

td:not(:last-child)::after {
    margin-right: 7px; /* 第一条线和单元格之间的间隔 */
}

/* 第二条线稍微偏移 */
th:not(:last-child)::before,
td:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 2px; /* 第二条线与第一条线之间的间隔 */
    height: 100%;
    width: 2px; /* 单条分隔线的宽度 */
    background-color: white; /* 分隔线的颜色 */
}

tr:nth-child(odd) {
    background-color: white; /* 白色 */
}

tr:nth-child(even) {
    background-color: #cce5ff; /* 浅蓝色 */
}
.button-predict {
    background-color:#336699; /* 绿色背景 */
    color: white; /* 白色字体 */
    border: none; /* 无边框 */
    padding: 5px 5px; /* 内边距 */
    text-align: center; /* 中心对齐 */
    text-decoration: none; /* 无下划线 */
    display: inline-block; /* 行内块元素 */
    font-size: 13px; /* 字体大小 */
    margin: 2px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    border-radius: 5px; /* 圆角 */
    transition: background-color 0.3s; /* 背景色变化效果 */
}

.button-predict:hover {
    background-color: #99CCFF; /* 悬停时的背景颜色 */
}

.button-predict:disabled {
    background-color: #ccc; /* 禁用状态的背景颜色 */
    cursor: not-allowed; /* 禁用状态的鼠标样式 */
}
